<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="false"
      :showBackIcon="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title=" "
    >
      <view class="segmentedBox">
        <u-subsection
          :list="subsectionList"
          :current="0"
          bgColor="rgba(255,255,255,0.4)"
          @change="subsectionChange"
        >
        </u-subsection>
      </view>
    </u-navbar>

    <image class="bg" src="/static/images/bg.png" mode="widthFix"></image>

    <view class="content">
      <view class="header">
        <image
          class="header-img"
          src="/static/images/rankList-bg.png"
          mode="widthFix"
        >
        </image>

        <view class="champion">
          <image
            class="champion-img"
            src="/static/images/rankList-f.png"
            mode="aspectFill"
          >
          </image>
          <image
            class="champion-headImg"
            :src="list[0] ? list[0].headImg : '/static/images/defaultHead.png'"
            mode="widthFix"
          ></image>
          <view class="champion-name"
            >{{ list[0] ? list[0].realName : '-' }}
          </view>
          <view class="champion-income"
            >总星辉值:¥{{ list[0] ? list[0].totalAmount : 0 }}
          </view>
        </view>

        <view class="secondPlace">
          <image
            class="secondPlace-img"
            src="/static/images/rankList-s.png"
            mode="aspectFill"
          >
          </image>
          <image
            class="secondPlace-headImg"
            :src="list[1] ? list[1].headImg : '/static/images/defaultHead.png'"
            mode="widthFix"
          ></image>
          <view class="secondPlace-name"
            >{{ list[1] ? list[1].realName : '-' }}
          </view>
          <view class="secondPlace-income"
            >总星辉值:¥{{ list[1] ? list[1].totalAmount : 0 }}
          </view>
        </view>

        <view class="thirdPlace">
          <image
            class="thirdPlace-img"
            src="/static/images/rankList-t.png"
            mode="aspectFill"
          >
          </image>
          <image
            class="thirdPlace-headImg"
            :src="list[2] ? list[2].headImg : '/static/images/defaultHead.png'"
            mode="widthFix"
          ></image>
          <view class="thirdPlace-name"
            >{{ list[2] ? list[2].realName : '-' }}
          </view>
          <view class="thirdPlace-income"
            >总星辉值:¥{{ list[2] ? list[2].totalAmount : 0 }}
          </view>
        </view>
      </view>

      <view class="mainContent">
        <view class="listHeader">
          <view class="listHeader-in">
            <text style="width: 10%">排名</text>
            <text style="width: 20%">基础信息</text>
            <text style="width: 30%">激活终端</text>
            <text style="width: 20%">交易量(万)</text>
            <text style="width: 20%">累计收益</text>
          </view>
        </view>
        <view class="list">
          <block v-for="(item, index) in list" :key="index">
            <view class="item">
              <view class="left">
                <view class="item-index">
                  <image
                    v-if="index === 0"
                    class="indexBg"
                    src="/static/images/rankList-list-f.png"
                    mode="aspectFill"
                  >
                  </image>
                  <image
                    v-if="index === 1"
                    class="indexBg"
                    src="/static/images/rankList-list-s.png"
                    mode="aspectFill"
                  >
                  </image>
                  <image
                    v-if="index === 2"
                    class="indexBg"
                    src="/static/images/rankList-list-t.png"
                    mode="aspectFill"
                  >
                  </image>
                  <text v-if="index > 2" class="indexTxt">{{
                    item.index
                  }}</text>
                  <text v-else class="indexTxt1">{{ item.index }}</text>
                </view>

                <image
                  class="item-headImg"
                  :src="item.headImg"
                  mode="widthFix"
                ></image>

                <view class="item-content">
                  <view class="item-name">{{ item.realName }}</view>
                  <view class="item-active">
                    投放终端:{{ item.totalActiveTerm }}台</view
                  >
                  <view class="item-volume"
                    >成长值:{{ item.totalTransAmount }}</view
                  >
                </view>
              </view>
              <view class="item-total">¥{{ item.totalAmount }}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import service from '@/common/service.js';
import { showLoading, hideLoading } from '@/common/utils.js';

export default {
  data() {
    return {
      subsectionList: [
        {
          name: '团队',
        },
        {
          name: '个人',
        },
        {
          name: '星穹',
        },
      ],
      list: [],
      current: 0,
    };
  },
  onLoad: function (options) {
    this.getData(0);
  },
  methods: {
    getData(key) {
      const that = this;
      showLoading();
      if (key === 0) {
        service.teamRank(
          {},
          function (res) {
            if (res.data && res.status === 1) {
              let list = res.data.map((item, index) => {
                item.index = index + 1 > 9 ? index + 1 : '0' + (index + 1);
                item.headImg = item.headImg
                  ? item.headImg
                  : '/static/images/defaultHead.png';
                return item;
              });
              that.list = list;
            }
            hideLoading();
          },
          function () {
            hideLoading();
          }
        );
      } else if (key === 1) {
        service.sysRank(
          {},
          function (res) {
            if (res.data && res.status === 1) {
              let list = res.data.map((item, index) => {
                item.index = index + 1 > 9 ? index + 1 : '0' + (index + 1);
                item.headImg = item.headImg
                  ? item.headImg
                  : '/static/images/defaultHead.png';
                return item;
              });
              that.list = list;
            }

            hideLoading();
          },
          function () {
            hideLoading();
          }
        );
      } else {
        service.getSelfPaiHangBang(
          {},
          function (res) {
            if (res.data && res.status === 1) {
              let list = res.data.map((item, index) => {
                item.index = index + 1 > 9 ? index + 1 : '0' + (index + 1);
                item.headImg = item.headImg
                  ? item.headImg
                  : '/static/images/defaultHead.png';
                return item;
              });
              that.list = list;
            }

            hideLoading();
          },
          function () {
            hideLoading();
          }
        );
      }
    },
    subsectionChange(index) {
      this.current = index;
      this.getData(index);
    },
  },
};
</script>
<style lang="scss" scope>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.content {
  position: relative;
  width: 100%;
}

.header {
  width: 100%;
  z-index: 9;
}

.header-img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 9;
}

.segmentedBox {
  position: absolute;
  top: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 300rpx;
  z-index: 99;
}

.champion {
  position: absolute;
  top: 20rpx;
  left: 50%;
  width: 200rpx;
  margin-left: -100rpx;
  text-align: center;
  z-index: 99;
  .champion-img {
    position: relative;
    width: 155rpx;
    height: 169rpx;
    z-index: 99;
  }

  .champion-headImg {
    position: absolute;
    top: 30rpx;
    left: 40rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: rgb(245, 245, 245);
    z-index: 1;
  }

  .champion-name {
    width: 100%;
    font-size: 28rpx;
    line-height: 1;
    color: #ffffff;
    text-align: center;
  }

  .champion-income {
    margin-top: 10rpx;
    width: 100%;
    font-size: 22rpx;
    color: #9d9da1;
    line-height: 1.2;
    text-align: center;
  }
}

.secondPlace {
  position: absolute;
  top: 80rpx;
  left: 40rpx;
  width: 200rpx;
  text-align: center;
  z-index: 99;
  .secondPlace-img {
    position: relative;
    width: 155rpx;
    height: 169rpx;
    z-index: 99;
  }

  .secondPlace-headImg {
    position: absolute;
    top: 30rpx;
    left: 40rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: rgb(245, 245, 245);
    z-index: 1;
  }

  .secondPlace-name {
    width: 100%;
    font-size: 28rpx;
    line-height: 1;
    color: #fff;
    text-align: center;
  }

  .secondPlace-income {
    margin-top: 10rpx;
    width: 100%;
    font-size: 22rpx;
    line-height: 1.2;
    color: #9d9da1;
    text-align: center;
  }
}

.thirdPlace {
  position: absolute;
  top: 105rpx;
  right: 40rpx;
  width: 200rpx;
  text-align: center;
  z-index: 99;
  .thirdPlace-img {
    position: relative;
    width: 155rpx;
    height: 169rpx;
    z-index: 99;
  }

  .thirdPlace-headImg {
    position: absolute;
    top: 30rpx;
    left: 40rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: rgb(245, 245, 245);
    z-index: 1;
  }

  .thirdPlace-name {
    width: 100%;
    font-size: 28rpx;
    line-height: 1;
    color: #fff;
    text-align: center;
  }

  .thirdPlace-income {
    margin-top: 10rpx;
    width: 100%;
    font-size: 22rpx;
    line-height: 1.2;
    color: #9d9da1;
    text-align: center;
  }
}

.mainContent {
  position: relative;
  margin-top: 20rpx;
  width: 100%;
  padding: 20rpx;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  z-index: 99;
  .listHeader {
    position: relative;
    width: 100%;
    padding: 0 28rpx;
    height: 62rpx;
    background: #f6f6f6;
    border-radius: 10rpx;
    box-sizing: border-box;
    text {
      display: inline-block;
      color: #222222;
      font-size: 24rpx;
      line-height: 62rpx;
      text-align: center;
    }
  }

  .list {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
}

.item {
  float: left;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 220rpx;
  padding: 35rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
}

.item .left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item-index {
  position: relative;
  width: 55rpx;
  height: 45rpx;
  .indexBg {
    width: 55rpx;
    height: 45rpx;
    z-index: 1;
  }
  .indexTxt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 36rpx;
    font-weight: bold;
    color: #cccccc;
    line-height: 45rpx;
    text-align: center;
    z-index: 9;
  }
  .indexTxt1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    font-weight: bold;
    color: #fff;
    line-height: 45rpx;
    text-align: center;
    z-index: 9;
  }
}

.item-headImg {
  margin-left: 30rpx;
  position: relative;
  width: 110rpx;
  height: 110rpx;
  background-color: rgb(245, 245, 245);
  border-radius: 50%;
  overflow: hidden;
}

.item-imgBg {
  width: 100%;
}

.item-content {
  flex: 1;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.item-name {
  width: 100%;
  font-size: 28rpx;
  line-height: 1;
  color: #222222;
  text-align: left;
}

.item-active {
  margin-top: 14rpx;
  width: 100%;
  font-size: 24rpx;
  color: #999999;
  line-height: 1;
  text-align: left;
}

.item-volume {
  margin-top: 15rpx;
  width: 100%;
  font-size: 24rpx;
  color: #999999;
  line-height: 1.3;
  text-align: left;
}

.item-total {
  font-size: 37rpx;
  font-family: Source Han Sans CN, sans-serif;
  font-weight: bold;
  color: #eb553f;
  line-height: 1;
}
</style>
